<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>福州大学一码通</title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}

			span {
				font-size: 2.5vh;
				color: #fff;
				margin-bottom: 2.5vh;
			}

			.contentBox {
				width: 100%;
				height: 100%;
				background: rgb(10, 130, 190);
			}

			.content {
				width: 100%;
				height: 100%;
				background: url(logo.png) no-repeat;
				background-size: 10.5vh;
				background-position: 92% 1vh;
				padding: 2vh 3vh;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
			}

			.username {
				height: 100%;
				width: 50%;
				padding: 0;
				border: 0;
				background: transparent;
				color: #fff;
				font-size: 2.5vh;
			}

			.box {
				position: relative;
				/* width: 100%; */
				height: 60vh;
				background: #fff;
				padding: 2vh 3vh;
				border-radius: 1vh;
				margin-bottom: 4vh;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				/* justify-content: space-between; */
				overflow: hidden;
			}

			#barcode {
				width: 100%;
			}

			.time {
				height: 8vh;
				display: flex;
				align-items: baseline;
				justify-content: center;
			}

			#second {
				margin: 0 1vh;
				font-size: 4vh;
			}

			.time span {
				font-size: 2.2vh;
				color: rgb(35, 146, 69);
				font-weight: bold;
			}

			.qcodeBox {
				display: flex;
				justify-content: center;
			}

			.qcode {
				width: 19vh;
				height: 17vh;
			}

			.txt {
				color: rgb(35, 146, 69);
				font-size: 1.5vh;
				margin-bottom: 3vh;
			}

			.card {
				width: 16vh;
				height: 5vh;
			}

			.nameBox {
				display: flex;
				justify-content: center;
			}

			#name {
				height: 3vh;
				width: 15vh;
				font-size: 2.2vh;
				font-weight: bold;
				color: #fff;
				background: transparent;
				border: 0.2vh solid #fff;
				border-radius: 0.8vh;
				text-align: center;
			}

			#float {
				/* position: absolute;
				left: 0;
				bottom: 10vh; */
				height: 9vh;
				font-size: 5vh;
				color: rgb(35, 146, 69);
				width: 100%;
				display: inline-block;
				padding-left: 100%;
				animation: turnLeft 5s linear infinite;
				/* font-weight: bold; */
			}

			@keyframes turnLeft {
				from {
					transform: translateX(0);
				}

				to {
					transform: translateX(-62%);
				}
			}
		</style>
	</head>
	<body>
		<div class="contentBox">
			<div class="content">
				<span>姓名： <input type="text" class="username" value="温康琪" /></span>
				<span>部门： 数学与计算机科学学院</span>
				<div class="box">
					<img id="barcode" />
					<div class="time">
						<span id="date"></span>
						<span id="second"></span>
						<span id="time"></span>
					</div>
					<div class="qcodeBox">
						<img class="qcode" src="qcode2.png" />
					</div>
					<div id="float">富强</div>
					<div class="txt">
						未见异常，允许通行，请主动出示，配合检测，并做好自我防护，出行前请确认。
					</div>
					<img class="card" src="card.png" />
				</div>
				<div class="nameBox">
					<input type="text" id="name" value="每日健康填报" onfocus="clearName()" onblur="getName()" />
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let date = dateFormat(new Date())
			$('#date').html(date)
			let time = dateFormat2(new Date())
			$('#time').html(time)


			let second
			setInterval(() => {
				second = new Date().getSeconds()
				if (second < 10) second = '0' + second
				$('#second').html(second)
			}, 1000)


			CreateIma()
			//生成条码
			function CreateIma() {
				var content = '314811811811881181188118';
				var barcode = document.getElementById('barcode'),
					//str = "chenyanbin",
					options = {
						format: "CODE128",
						displayValue: true,
						fontSize: 0,
						height: 100
					};
				JsBarcode(barcode, content, options); //原生JS方式
				// $('#barcode').JsBarcode(string, options); //jQuery方式
			}

			function dateFormat(data) {
				Date.prototype.Format = function(fmt) {
					var o = {
						'M+': this.getMonth() + 1, //月份
						'd+': this.getDate(), //日
						'h+': this.getHours(), //小时
						'm+': this.getMinutes(), //分
						's+': this.getSeconds() //秒
					};
					if (/(y+)/.test(fmt)) {
						//根据y的长度来截取年
						fmt = fmt.replace(
							RegExp.$1,
							(this.getFullYear() + '').substr(4 - RegExp.$1.length)
						);
					}
					for (var k in o) {
						if (new RegExp('(' + k + ')').test(fmt))
							fmt = fmt.replace(
								RegExp.$1,
								RegExp.$1.length == 1 ?
								o[k] :
								('00' + o[k]).substr(('' + o[k]).length)
							);
					}
					return fmt;
				};
				return data.Format('MM月dd日');
			}

			function dateFormat2(data) {
				Date.prototype.Format = function(fmt) {
					var o = {
						'M+': this.getMonth() + 1, //月份
						'd+': this.getDate(), //日
						'h+': this.getHours(), //小时
						'm+': this.getMinutes(), //分
						's+': this.getSeconds() //秒
					};
					if (/(y+)/.test(fmt)) {
						//根据y的长度来截取年
						fmt = fmt.replace(
							RegExp.$1,
							(this.getFullYear() + '').substr(4 - RegExp.$1.length)
						);
					}
					for (var k in o) {
						if (new RegExp('(' + k + ')').test(fmt))
							fmt = fmt.replace(
								RegExp.$1,
								RegExp.$1.length == 1 ?
								o[k] :
								('00' + o[k]).substr(('' + o[k]).length)
							);
					}
					return fmt;
				};
				return data.Format('hh:mm');
			}

			function clearName() {
				$('#name').val('')
			}

			function getName() {
				let name = $('#name').val()
				$('#float').html(name)
				$('#name').val('每日健康填报')
			}
		</script>
	</body>
</html>
